import React from 'react';
import {Icon, Select } from 'antd';
const Option = Select.Option;

class EditSelectCell extends React.Component {
    state = {
      value: this.props.value,
      editable: false,
    }

    componentWillReceiveProps(nextprops) {
      this.setState({value: nextprops.value});
    }
    handleChange = (value) => {
      this.setState({ editable: false, value });
      this.props.changeEditStatus(false);
      if (this.props.onChange) {
        this.props.onChange(value);
        this.props.pickPoint([], this.props.tagFilePath, '');
      }
    }

    handleBlur = (value) => {
      this.setState({ editable: false });
      this.props.changeEditStatus(false);
      if (this.props.onChange) {
        this.props.onChange(value);
        this.props.pickPoint([], this.props.tagFilePath, '');
      }
    }

    edit = () => {
      if (!this.props.editing) {
        this.setState({ editable: true });
        this.props.changeEditStatus(true);
      } else {
        this.props.modalWarning();
      }
    }
    render() {
      const { value, editable } = this.state;
      return (
        <div className="editable-cell">
          {
            editable ? (
              <Select defaultValue="" style={{width: '80px', fontSize: '12px'}} value={this.state.value} onBlur={this.handleBlur} onSelect={this.handleChange}>
                <Option style={{fontSize: '12px'}} value="离床">离床</Option>
                <Option style={{fontSize: '12px'}} value="呼吸暂停">呼吸暂停</Option>
              </Select>
            ) : (
              <div style={{ paddingRight: 24 }}>
                {value || ' '}
                <Icon
                  type="edit"
                  className="editable-cell-icon"
                  onClick={this.edit}
                />
              </div>
            )
          }
        </div>
      );
    }
  }

  export default EditSelectCell;